---
title: "Get a file with an ajax call"
layout: default
section: example
---

<p>Tip : check the source of the page !</p>

<h3>With JSZipUtils</h3>
<div id="jszip_utils"></div>

<h3>With the Fetch API</h3>
<div id="fetch"></div>

<script type="text/javascript">
(function () {

  function showError(elt, err) {
    elt.innerHTML = "<p class='alert alert-danger'>" + err + "</p>";
  }

  function showContent(elt, content) {
    elt.innerHTML = "<p class='alert alert-success'>loaded !<br/>" +
      "Content = " + content + "</p>";
  }

  //=========================
  // JSZipUtils
  //=========================
  JSZipUtils.getBinaryContent('{{site.baseurl}}/test/ref/text.zip', function(err, data) {
    var elt = document.getElementById('jszip_utils');
    if(err) {
      showError(elt, err);
      return;
    }

    try {
      JSZip.loadAsync(data)
      .then(function(zip) {
        return zip.file("Hello.txt").async("string");
      })
      .then(function success(text) {
        showContent(elt, text);
      }, function error(e) {
        showError(elt, e);
      });
    } catch(e) {
      showError(elt, e);
    }
  });

  //=========================
  // Fetch API
  //=========================
  (function () {
    var elt = document.getElementById('fetch');
    if(typeof window.fetch === "function") {
      fetch('{{site.baseurl}}/test/ref/text.zip')
      .then(function (response) {
        if (response.status === 200 || response.status === 0) {
          return Promise.resolve(response.arrayBuffer())
        } else {
          return Promise.reject(new Error(response.statusText))
        }
      })
      .then(JSZip.loadAsync)
      .then(function (zip) {
        return zip.file("Hello.txt").async("string");
      })
      .then(function success(text) {
        showContent(elt, text);
      }, function error(e) {
        showError(elt, e);
      });
    } else {
      showError(elt, "This browser doesn't support the Fetch API.");
    } 
  })();

})();
</script>
